<template>
  <div class="maeket">
    <div class="data">
      <div>
        <p>{{ getSale?.title }}</p>
        <strong>{{
          `￥${parseFloat(getSale?.value)
            .toFixed(2)
            .replace(/\B(?=(\d{3})+(?!\d))/g, ",")}`
        }}</strong>
      </div>
      <slot name="icon" />
    </div>
    <p>同比上月</p>
  </div>
</template>

<script>
export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: "Market",
  props: {
    getSale: {
      type: Object,
      //required: true,
    },
  },
  data() {
    return {};
  },
  components: {},
  methods: {},
  mounted() {},
};
</script>

<style lang="less" scoped>
.maeket {
  width: 100%;
  height: 100px;
  color: #fff;
  p {
    font-size: 12px;
  }
  .data {
    height: 79px;
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    p {
      margin-bottom: 10px;
    }
    strong {
      font-size: 22px;
    }
    div:first-child {
      width: 100%;
    }
    button {
      width: 50px;
      height: 50px;
      font-size: 25px;
    }
  }
}
</style>
